$(function() {
    var f;
    var index = 0; dsq();

    function dsq() {
        f = setInterval(function() {
            if (index == $(".tp").length - 1) {
                index = 0;
                $(".tp").css("opacity", "0");
                $(".tp").eq(index).css("opacity", "1");
                $(".btn").css("background-color", "#ccc");
                $(".btn").eq(index).css("background-color", "white");
            } else {
                index++;
                $(".tp").css("opacity", "0");
                $(".tp").eq(index).css("opacity", "1");
                $(".btn").css("background-color", "#ccc");
                $(".btn").eq(index).css("background-color", "white");
            }
        }, 1000)
    }

    $(".left").click(function() {
        clearInterval(f);
        if (index == 0) {
            index = $(".tp").length - 1;
            $(".tp").css("opacity", "0");
            $(".tp").eq(index).css("opacity", "1");
            $(".btn").css("background-color", "#ccc");
            $(".btn").eq(index).css("background-color", "white");
            dsq();
        } else {
            index--;
            $(".tp").css("opacity", "0");
            $(".tp").eq(index).css("opacity", "1");
            $(".btn").css("background-color", "#ccc");
            $(".btn").eq(index).css("background-color", "white");
            dsq();
        }
    })
    $(".right").click(function() {
        clearInterval(f);
        if (index == $(".tp").length - 1) {
            index = 0;
            $(".tp").css("opacity", "0");
            $(".tp").eq(index).css("opacity", "1");
            $(".btn").css("background-color", "#ccc");
            $(".btn").eq(index).css("background-color", "white");
            dsq();
        } else {
            index++;
            $(".tp").css("opacity", "0");
            $(".tp").eq(index).css("opacity", "1");
            $(".btn").css("background-color", "#ccc");
            $(".btn").eq(index).css("background-color", "white");
            dsq();
        }
    })
    $(".btn").click(function() {
        clearInterval(f);
        var indexx = $(this).index();
        index = indexx;
        $(".tp").css("opacity", "0");
        $(".tp").eq(index).css("opacity", "1");
        $(".btn").css("background-color", "#ccc");
        $(".btn").eq(index).css("background-color", "white");
        dsq();
    })
})